<template>
  <div class="content">
    <ul class="brand-list">
      <li class="brand-item">
        <div class="brand-img">
          <img :src="brand.brandImg" alt="">
        </div>
        <div class="brand-text">
          <div class="text-top">
            <span class="brand-title">{{brand.brandName}}</span>
            <span class="brand-tip">{{brand.brandContent}}</span>
          </div>
          <div class="text-bottom">
            <p class="explain">用你的心意为这个节日带去欢乐，更送给每个人一份美好的憧憬</p>
          </div>
        </div>
      </li>
    </ul>
    <div class="nav">
      <ul>
        <li>全部</li>
        <li>
          价格
          <i class="up" @click="priceUp"></i>
          <i class="down" @click="priceDown"></i>
        </li>
        <li @click="category">类别</li>
      </ul>
    </div>
    <div class="allGoods">
        <ul class="list">
          <li class="item"  v-for="(good,index) in goods" :key="index" @click="goDetail(index)">
            <div class="top">
              <div class="pic left">
                <div class="img">
                  <img :src="good.mallImg" alt=""></div></div>
              <div class="right">
                <span class="goodsName">{{good.mallName}}</span>
                <p class="goodsPrice">
                  <span class="gray">已进货： {{good.mallSecify[0].stock}}件</span>
                </p>
                <p class="red"><span class="red-left">&yen {{good.mallSecify[0].salePrice / 100}}</span><span
                  class="red-right" v-if="userType">&yen{{good.mallSecify[0].salePrice * good.commissionRatio / 100 / 10000}}</span>
                </p>
                <p class="jdp"><span class="jdp-left">京东价: {{good.mallSecify[0].jdPrice / 100}}</span><span
                  class="jdp-right" v-if="userType">预计佣金</span>
                </p>
              </div>
            </div>
          </li>
        </ul>
    </div>
  </div>


</template>

<script>
  import {relogin} from "../../components/httpUtil/httpUtil";
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../../components/httpUtil/httpUtil'
  import {msg_10046} from '../../message/msg_10046'
  export default {
    name: '',
    data () {
      return {
        brand:{},
        goods:[],
        FL:{},
        userType:false
      }
    },
    methods:{
      // 指定排序的比较函数
      compareUp (property) {
        return function (obj1, obj2) {
          let value1 = obj1[property];
          let value2 = obj2[property];
          return  value1 - value2 ;     // 升序
        }
      },
      compareDown (property) {
        return function (obj1, obj2) {
          let value1 = obj1[property];
          let value2 = obj2[property];
          return  value2 - value1 ;     // 升序
        }
      },
      //价格排序
      priceUp(){
        this.goodsList.sort(this.compareUp('salePrice'))
      },
      priceDown(){
        this.goodsList.sort(this.compareDown('salePrice'))
      },
      //类别排序
      category(){
        this.isClick = !this.isClick;
        if(this.isClick){
          this.goodsList.sort(this.compareUp('goodsType1'))
        }else {
          this.goodsList.sort(this.compareDown('goodsType1'))
        }
      },
      getlist () {
        const jsonValue = JSON.stringify({
          'c': '10006',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id,
            'tokenId': token(),
            'startIndex': 0,
            'pageSize': 5,
            "firClass": this.FL.fid,//商品一级分类
            "secClass": this.FL.id,//商品二级分类
//            "mallTagging":1 //商品标注 0新品  1热销
          }
        })
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res)
          // this.hideLoading();
          if (res.data.p.isTrue) {
            this.goods = res.data.p.list
            console.log(this.goods)
          } else {
            this.alertTip(res.data.p.errorMsg);
            if (res.data.p.errorMsg === 90) {
              this.go = ()=> {
                this.showAlert = false
                let _this = this;
                relogin(_this)
              }
            }
          }
        })
      },
      goDetail(index){
        window.localStorage.mallId = this.goods[index].id
        this.$router.push({
          path: '/detail',
          query: {
            shopId: window.localStorage.shopId,
            mallId: window.localStorage.mallId,
            shopType:1
          }
        })
      }
    },
    created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          varThis.hideLoading();
          wx_config(varThis.wxlist);
          varThis.hideLoading();
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
      this.userType = JSON.parse(window.localStorage.data).type==0?false:true
      this.FL = JSON.parse(localStorage.getItem('FL'))
      this.brand = JSON.parse(localStorage.getItem('brand'));
      this.getlist()
    }
  }
</script>

<style lang="scss" scoped>
  .content{
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    .brand-list{
      background: #ffffff;
      .brand-item{
        height: 426px;
        margin-bottom: 20px;
        .brand-img{
          height: 260px;
          width: 100%;
          background: #009dda;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .brand-text{
          height: 166px;
          padding-left: 30px;
          padding-right: 32px;
          .text-top{
            padding-top: 14px;
            height: 46px;
            line-height:46px;
            .brand-title{
              float: left;
              font-size: 28px;
              color: #3b3b43;
            }
            .brand-tip{
              float: right;
              font-size: 24px;
              color: #fe3519;
            }
          }
          .text-bottom{
            font-size: 24px;
            color: #a1a1a1;
            line-height: 32px;
          }
        }
      }
    }
    .nav {
      margin-top: 20px;
      background: #ffffff;
      width: 100%;
      height: 92px;
      line-height: 92px;
      >ul {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        >li {
          position: relative;
          font-size: 32px;
          >i{
            position: absolute;
            width: 22px;
            height: 12px;
            background: url("./ico@1x.png") no-repeat ;
            background-size: 100%;
            &.up{
              background-position: 0px 0px;
              top: 30px;
              left: 72px;
            }
            &.down{
              background-position: 0px -18px;
              position: absolute;
              top:50px;
              left: 72px;
            }
          }
        }
      }
    }
    .allGoods {
      margin-top: 3px;
      >ul {
        display: flex;
        flex-flow: row wrap;
        >li {
          background: #ffffff;
          width: 100%;
          height: 276px;
          margin-bottom: 20px;
          .top {
            height: 276px;
            /*width: 100%;*/
            border-bottom: 1px solid #f4f4f4;
            box-sizing: border-box;
            padding: 26px 20px 30px 30px;
            .left {
              width: 220px;
              height: 220px;
              float: left;
              .img {
                background: #0099ff;
                width: 220px;
                height: 220px;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .right {
              font-size: 26px;
              width: 340px; /*让文本自动换行，自适应*/
              margin-left: 28px;
              float: left;
              .goodsName {
                font-size: 28px;
                color: #3b3b43;
              }
              .goodsPrice {
                margin: 28px 0 30px;
                .gray {
                  font-size: 20px;
                  /*text-align: center;*/
                  color: #a1a1a1;
                }
              }
              .red {
                width: 100%;
                font-size: 32px;
                height: 34px;
                margin-bottom: 10px;
                .red-left {
                  float: left;
                  color: #3b3b43;
                }
                .red-right {
                  float: right;
                  color: #fd4c2e;
                }
              }
              .jdp {
                font-size: 20px;
                color: #a1a1a1;
                .jdp-left {
                  float: left;
                }
                .jdp-right {
                  float: right;
                }
              }
              .goodsTime {
                font-size: 20px;
              }
            }
          }
        }
      }
    }
  }
</style>
